<template>
  <div class="font-size-component" :style="componentStyle">
    <!-- SVG图标 -->
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="font-size-icon"
      @click="toggleMenu"
    >
      <!-- 大T字母 -->
      <rect x="3" y="3" width="12" height="2" fill="currentColor"/>
      <rect x="8" y="5" width="2" height="14" fill="currentColor"/>
      
      <!-- 小T字母 -->
      <rect x="13" y="11" width="6" height="1.5" fill="currentColor"/>
      <rect x="15.5" y="10.5" width="1" height="8" fill="currentColor"/>
    </svg>

    <!-- 选项菜单 -->
    <div class="options-menu" :class="{ 'open': isOpen }">
      <div
        class="option-item"
        :class="{ 'active': currentSize === 'default' }"
        @click="selectSize('default')"
      >
        默认
      </div>
      <div
        class="option-item"
        :class="{ 'active': currentSize === 'large' }"
        @click="selectSize('large')"
      >
        大
      </div>
      <div
        class="option-item"
        :class="{ 'active': currentSize === 'small' }"
        @click="selectSize('small')"
      >
        小
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'

// Props 定义
interface Props {
  top?: string | number
  right?: string | number
  left?: string | number
  bottom?: string | number
  position?: 'fixed' | 'absolute' | 'relative' | 'static'
}

const props = withDefaults(defineProps<Props>(), {
  top: '16px',
  right: '50px',
  left: 'auto',
  bottom: 'auto',
  position: 'fixed'
})

const isOpen = ref(false)
const currentSize = ref<'default' | 'large' | 'small'>('default')

// 计算样式
const componentStyle = computed(() => {
  const style: Record<string, string> = {
    position: props.position,
    zIndex: '9999',
    display: 'inline-block'
  }
  
  if (props.top !== 'auto') {
    style.top = typeof props.top === 'number' ? `${props.top}px` : props.top
  }
  if (props.right !== 'auto') {
    style.right = typeof props.right === 'number' ? `${props.right}px` : props.right
  }
  if (props.left !== 'auto') {
    style.left = typeof props.left === 'number' ? `${props.left}px` : props.left
  }
  if (props.bottom !== 'auto') {
    style.bottom = typeof props.bottom === 'number' ? `${props.bottom}px` : props.bottom
  }
  
  return style
})

const toggleMenu = () => {
  isOpen.value = !isOpen.value
}

const selectSize = (size: 'default' | 'large' | 'small') => {
  currentSize.value = size
  
  // 应用字体大小
  const fontSizeMap = {
    default: '16px',
    large: '20px',
    small: '14px'
  }
  
  document.documentElement.style.fontSize = fontSizeMap[size]
  
  // 关闭菜单
  isOpen.value = false
}

// 点击外部关闭菜单
const handleClickOutside = (event: MouseEvent) => {
  const target = event.target as HTMLElement
  if (!target.closest('.font-size-component')) {
    isOpen.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
.font-size-component {
  display: inline-block;
}

.font-size-icon {
  color: #666666;
  cursor: pointer;
  transition: color 0.2s ease;
}

.font-size-icon:hover {
  color: #333333;
}

.options-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  min-width: 80px;
}

.options-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.option-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: #333333;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}

.option-item:hover {
  background-color: #f8f8f8;
}

.option-item.active {
  background-color: #e3f2fd;
  color: #1976d2;
}

.option-item:first-child {
  border-radius: 8px 8px 0 0;
}

.option-item:last-child {
  border-radius: 0 0 8px 8px;
}

.option-item:only-child {
  border-radius: 8px;
}
</style>
